<template>
    <div class="hospital">
        <!-- //左侧导航栏 -->
        <div class="menu">
            <el-menu default-active="/hospital/register" class="el-menu-vertical-demo">
                <el-menu-item index="/hospital/register" @click="changeActive('/hospital/register')">
                    <el-icon><icon-menu /></el-icon>
                    <span>预约挂号</span>
                </el-menu-item>
                <el-menu-item index="/hospital/detail" @click="changeActive('/hospital/detail')">
                    <el-icon>
                        <document />
                    </el-icon>
                    <span>医院详情</span>
                </el-menu-item>
                <el-menu-item index="/hospital/notice" @click="changeActive('/hospital/notice')">
                    <el-icon>
                        <setting />
                    </el-icon>
                    <span>预约通知</span>
                </el-menu-item>
                <el-menu-item index="/hospital/close" @click="changeActive('/hospital/close')">
                    <el-icon>
                        <setting />
                    </el-icon>
                    <span>停诊消息</span>
                </el-menu-item>
                <el-menu-item index="/hospital/search" @click="changeActive('/hospital/search')">
                    <el-icon>
                        <setting />
                    </el-icon>
                    <span>查询与取消</span>
                </el-menu-item>
            </el-menu>

        </div>
        <!-- //右测导航栏 -->
        <div class="content">
            <!-- 子组件展示路由 -->
            <router-view></router-view>
        </div>
    </div>
</template>

<script setup lang="ts">
//引入仓库pinia
import useDetailStore from '@/store/moduls/hospitalDetail';
//获取仓库对象
let detailStore = useDetailStore();
import { onMounted } from 'vue';
import {
    Document,
    Menu as IconMenu,
    Setting,
} from '@element-plus/icons-vue'
import { useRouter, useRoute } from 'vue-router'
let $router = useRouter()
//获取路由消息
let $route = useRoute()
//跳转路由
let changeActive = (value: string) => {
    $router.push({ path: value, query: { hoscode: $route.query.hoscode } })
}
onMounted(() => {
    // console.log($route.query.hoscode);
    //获取医院详情数据
    detailStore.getHospital($route.query.hoscode as string)
    //获取任意医院科室数据
    detailStore.getDepartment($route.query.hoscode as string)
})
</script>

<style lang="scss" scoped>
.hospital {
    display: flex;

    .menu {
        flex: 2;
    }

    .content {
        flex: 8;
    }
}
</style>